<template>
	<view class="chat">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="nav-content">
				<text class="group-name">{{name}}</text>
				<view class="group-info" @click="goToGroupDetail">
					群详情 >
				</view>
			</view>
		</view>

		<!-- 滚动聊天内容 -->
		<scroll-view 
			class="chat-scroll" 
			scroll-y 
			:scroll-into-view="scrollInto"
			scroll-with-animation
		>
			<block v-for="(item, index) in list" :key="index">
				<group-message
					:id="'chat' + index"
					:item="item"
					:pretime="index > 0 ? list[index - 1].createTime : 0"
				/>
			</block>
		</scroll-view>

		<bottom-input @submit="submit" />
	</view>
</template>

<script>
import GroupMessage from '@/components/GroupMessage/groupmessage.vue'
import BottomInput from '@/components/bottom-input/bottom-input.vue'
import {GroupMessageApi} from '@/api/index.js'
import {loadAllParams} from '@/api/page.js'
import { getUserId } from '../../api/forum/user'
import websocketMixin from '@/utils/mixins/websocketMixin'

export default {
	mixins: [websocketMixin],
	components: {
		GroupMessage,
		BottomInput
	},
	data() {
		return {
			name: null,
			scrollInto: '',
			query: {
				pageNo: 1,
				pageSize: 100,
				groupId: null
			},
			list: []
		}
	},
	onLoad(options) {
	    this.query.groupId = options.groupId; // 从页面加载选项中获取groupId
		this.name = options.groupName;
	    if (!this.query.groupId && !this.name) {
	      uni.showToast({
	        title: '群组ID或名称未指定',
	        icon: 'none'
	      });
	    }
	},
	onReady() {
		this.scrollToBottom()
	},
	mounted(){
		this.getMessage();
	},
	methods: {
		onGroupMessage(data) {
		    this.getMessage();
		},
		async getMessage(){
			const res = await GroupMessageApi.listByGroupId(this.query);
			this.list = res.data.list;
			this.list = res.data.list.map(item => ({
			        ...item,
			        createTime: new Date(item.createTime).getTime()
			}));
		},
		goToGroupDetail() {
			const groupId = this.query.groupId;
			uni.navigateTo({
				url: `/pages/groups/group_details?groupId=${groupId}`
			});
		},
		async submit(data) {
			const now = new Date();
			const messageDTO = {
				groupId: this.query.groupId,
				content: data
			}
			try {
			    const res = await GroupMessageApi.sendMessage(messageDTO);
		
			    if (res.code === 200) {
			        this.getMessage();
			    } else {
			        uni.showToast({ title: '发送失败', icon: 'none' });
			    }
			} catch (e) {
			    uni.showToast({ title: '网络错误', icon: 'none' });
			    console.error("发送消息失败", e);
			}
		},
		scrollToBottom() {
			const lastIndex = this.list.length - 1
			if (lastIndex < 0) return
			this.scrollInto = 'chat' + lastIndex
		}
	}
}
</script>

<style lang="scss" scoped>
.chat {
	position: relative;
	width: 100%;
	height: 100vh;

	.navbar {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #ffffff;
		z-index: 99;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		border-bottom: 2rpx solid #eee;

		.nav-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 88rpx;
		}

		.group-name {
			font-size: 32rpx;
			color: #333;
		}

		.group-info {
			font-size: 28rpx;
			color: #666;
			padding-left: 20rpx;
		}
	}

	.chat-scroll {
		position: absolute;
		left: 0;
		right: 0;
		top: 88rpx; /* 高度避开 navbar */
		bottom: 85rpx;
		padding-top: 20rpx;
	}

	.bottom-handle {
		border-top: 2rpx solid #eee;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 85rpx;
		background-color: #fff;
		display: flex;
		align-items: center;

		.send-btn {
			width: 80rpx;
			text-align: center;
		}
	}
}
</style>